@currency-font: DINAlternate-Bold, DINAlternate, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol';

.wrapper {
    margin-top: 16px;
    position: relative;
    background: #fff;
    overflow: auto;

    :global {
        .box{
            margin: 0 auto;
        }

        #fishBoneSvg {
            display: block;
            margin: 0 auto;
        }

        .icon-expand {
            cursor: pointer;
            z-index: 999;
            background: #f00;
            &-circle {
                fill: white;
                stroke: #E0E0E0;
                stroke-width: 62;
            }
            &-minus {
                fill: #000;
            }
            svg {
                cursor: pointer;
            }
        }

        .icon-collapsed {
            cursor: pointer;
            &-circle {
                fill: #FFA22D;
                stroke: #FFA22D;
                stroke-width: 62;
            }
            &-text {
                stroke: #FFF;
                fill: #FFF;
                stroke-width: 25;
                font-size: 30em;
            }
        }

        .icon-detail {
            cursor: pointer;
            fill: currentColor;
        }

        .icon-detail-use {
            cursor: pointer;
            color: rgba(0, 0, 0, 0.45);
            fill: rgba(0, 0, 0, 0.45);
            &:hover {
                fill: #FFA808;
                color: #FFA808;
            }
            &.icon-detail-use-enter {
                fill: #FFA808;
                color: #FFA808;
            }
        }

        .fish_text-value {
            font-family: @currency-font;
        }

        .fish-group--up .fish_text-value {
            fill: #44C69D;

            &.fish_text-value--des {
                fill: #5590F6;
            }
        }

        .fish-group--down .fish_text-value {
            fill: #FF5959;

            &.fish_text-value--des {
                fill: #5590F6;
            }
        }

        .fish-head {
            .fish_text-label {
                fill: rgba(0, 0, 0, 0.25);
                font-size: 14px;
                font-weight: bold;
            }

            .fish_text-value {
                font-size: 20px;
            }
        }

        .fish_title {
            &.fish_title--up {
                fill: #44C69D;
            }

            &.fish_title--down {
                fill: #FF5959;
            }

            rect {
                fill-opacity: 0.06
            }
        }

        .up_title-text {
            fill: #44C69D
        }

        .level-1 .fish_text-label{
            font-size: 14px;
        }
        .level-1 .fish_text-value {
            font-size: 16px;
        }

        .level-2 .fish_text-label,
        .level-2 .fish_text-value {
            font-size: 12px;
            font-weight: normal;
        }
    }
}

:global {
    .hide {
        display: none;
    }
    // 鱼骨图详情提示
    .fishbone-tip {
        position: absolute;
        z-index: 500;
        min-width: 300px;
        max-width: 600px;
        padding: 0 22px 22px 22px;
        box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
        border-radius: 8px;
        background: #fff;

        &>.fishbone-tip_head {
            border-bottom: 1px solid #ededed;
            padding: 8px 0;
            color: rgba(0, 0, 0, 0.65);
            font-size: 14px;
            font-weight: 600;
            line-height: 22px;
        }

        &>.fishbone-tip_body {
            margin-top: 16px;
            .title {
                margin-top: 8px;
                margin-bottom: 8px;
                font-size: 12px;
                font-weight: 600;
                color: rgba(0, 0, 0, 0.65);
                line-height: 18px;
            }
            .remark {
                overflow: auto;
                position: relative;
                margin-top: -8px;
                margin-bottom: 16px;
                font-size: 12px;
                font-weight: 600;
                color: rgba(0, 0, 0, 0.25);
                line-height: 18px;
            }

            .fishbone-tip_body_table {
                max-height: 250px;
                overflow: auto;

                .ant-table-body {
                    overflow-x: auto !important;
                }
            }
        }
    }
}
